<template>
  <div class="white-bg workbench">
         <el-tabs v-model="activeName"  >
    <el-tab-pane v-for="(item,index) in data" :key="index"
    
     :label="item.text" :name="item.text">
      <el-scrollbar class="workbenchContent">
        <el-row :gutter="10" style="margin: 0px">
            <el-col :span="6"
            style="margin-bottom: 20px"
             v-for="(item2,index) in item.children" :key="index"
             :title="item2.text"
              @click="handleClick(item2)"
             >
             <div class="maskBox">
                 <el-image
           
             
      :src="item2.impage"
       style="width: 100%;height: 100%"
      class="imgCard"
      fit="cover"
    />
       <div class="maskItem animate__animated animate__zoomIn " 
                @click="handleClick(item2)">
                {{ item2.text}}
                </div>
             </div>

            </el-col>
        </el-row>
    </el-scrollbar>
        
     </el-tab-pane>
  </el-tabs>
   
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute} from "vue-router";
const router = useRouter();
const route = useRoute();
import { data } from "./data";
const activeName = ref(data[0].text);
const dialogVisible = ref(true);
const state = reactive({});
const handleClick = (item:any) => {
  router.push({
    path: "/render/"+item.id,
  });
};
onMounted(() => {});
</script>

<style scoped lang="scss">
.workbench{
  height: 100%;
  padding: 10px;
  background-color: #fff;
  
  .workbenchContent{
     height: calc(100vh - 187px);
  }
.imgCard{
  cursor: pointer;
  height: 300px;
}
}
  .maskBox {
    position: relative;
    width: 100%;
    height: 300px;
    background: #042c67;
    cursor: pointer;
  }
  .maskItem {
    display: none;
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
     cursor: pointer;
     font-size: 30px;
     color: #fff;
     text-align: center;
     line-height: 300px;
  }
  .maskBox:hover {
    .maskItem {
      display: block;
      
    }
  }
</style>
